<template>
  <div class="app-container">
    <!--收藏职位-->
    <el-row :gutter="20">
      <!--收藏职位选项卡-->
      <el-col :span="24">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">收藏职位</span></el-menu-item>
        </el-menu>
      </el-col>
      <!--收藏职位选项卡-->
      <!--收藏职位-->
      <el-col :span="24">
        <el-card
          style="
                margin-top: 10px;
                padding-bottom: 10px;
                width: 100%;"
          shadow="hover">
          <div>

            <!--收藏职位向标题-->
            <div class="job-status__title">
              收藏职位
              <span class="job-status__title__must">必填</span>
            </div>
            <!--收藏职位标题-->



            <!--收藏职位列表展示-->
            <div style="clear: both;">
              <el-card
                style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                shadow="hover">

                <template v-if="postList.length != 0">
                  <el-descriptions v-for="(item,index) in postList"  :key="item.id"  style="padding: 20px;color: red;"  :title="item.postName" :column="2">
                    <template slot="extra">
                      <el-button type="primary" icon="el-icon-view"  size="mini" slot="reference" @click="handleSeeDetail(item.postId)">详情</el-button>
                      <el-button type="danger" size="mini" @click="handleDelete(item.id)" class="el-icon-delete-solid">删除</el-button>
                    </template>
                    <el-descriptions-item label="收藏职位名称">{{item.postName}}</el-descriptions-item>
                    <el-descriptions-item label="收藏时间">{{item.favorDate}}</el-descriptions-item>

                  </el-descriptions>

                  <!--分页组件-->
                  <el-pagination
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    :total="pagination.total"
                    :page-sizes="[10, 20, 50, 100]"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total,sizes, prev, pager, next, jumper">
                  </el-pagination>
                  <!--分页组件-->
                </template>
                <template v-else>
                  <el-result icon="info" title="新增信息提示" subTitle="当前还没有收藏职位方面的说明哦！">
                    <template slot="extra">
                      <el-empty description="快去收藏职位吧！"></el-empty>
                    </template>
                  </el-result>
                </template>

              </el-card>
            </div>
            <!--收藏职位列表展示-->
          </div>

        </el-card>


      </el-col>
      <!--收藏职位  -->
    </el-row>



    <!--查看职位详情对话框-->
    <el-dialog
      title="查看职位详情对话框"
      :visible.sync="dialogFormVisible4Detail"
      width="1200px"
      height="1200px"
      :before-close="handleDetailFormClose">
      <el-descriptions title="职位信息">
        <el-descriptions-item label="公司名称">{{post.companyName}}</el-descriptions-item>
        <el-descriptions-item label="职位名称">{{post.name}}</el-descriptions-item>
        <el-descriptions-item label="受教育程度">{{post.education}}</el-descriptions-item>
        <el-descriptions-item label="工作经历">{{post.experience}}</el-descriptions-item>
        <el-descriptions-item label="薪资">{{post.salary}}</el-descriptions-item>
        <el-descriptions-item label="招聘人数">{{post.count}}</el-descriptions-item>
        <el-descriptions-item label="工作地点">{{post.address}}</el-descriptions-item>
        <el-descriptions-item label="公司类型">{{post.type}}</el-descriptions-item>
        <el-descriptions-item label="公司创建时间">{{post.created}}</el-descriptions-item>
        <el-descriptions-item label="职位描述">{{post.description}}</el-descriptions-item>
        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
        <el-divider></el-divider>
        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>

      </el-descriptions>



    </el-dialog>
    <!--查看公司企业对话框-->



  </div>
</template>

<script>
import {getFavorPost,deleteFavor} from "@/api/favor"
import {findById} from "@/api/post"
export default {
  name: "index",
  data() {
    return {
      wrapperVisible:false, //展示展示框状态
      postList:[],//公司数组
      pagination: {
        currentPage: 1,
        pageSize:10,
        total:0,
        queryParams:{}
      },//分页数据模型数
      dialogFormVisible4Detail:false,//职位详情展示框是否显示
      post:{}//职位信息

    }
  },
  created() {
    this.findPage()
  },
  methods: {
    //弹出查询职位详情窗口的方法
    handleSeeDetail(id){
      console.info("【====系统正在弹出职位详情窗口====】")
      this.resetForm();
      this.dialogFormVisible4Detail = true;
      //发送请求
      findById(id).then(res=>{
        this.post = res.data;
      })
      console.info(`====【系统正在弹出职位详情窗口成功！！并成功获取了ID为：${id}的职位详情窗口详情=====`)
    },
    //清空表单数据
    resetForm(){
      this.post = {}
    },
    //关闭详情表单的方法
    handleDetailFormClose(){
      this.dialogFormVisible4Detail = false;
      //设置表单数据模型为空
      this.resetForm();
    },
    //删除收藏记录
    handleDelete(id){
      //弹出删除对话框
      this.$confirm(`此操作将【永久删除】该收藏记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //发送请求，携带row.id
        deleteFavor(id).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.findPage()
            }
          })

        })

      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },
    //获取收藏职位集合
    findPage(){
      console.log("======系统正在获取收藏职位集合========")
      getFavorPost(this.pagination).then(res=>{
        this.postList = res.data.rows;
        this.pagination.total = res.data.total;
      })
      console.log("======系统获取收藏职位集合成功！！========")
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage()
    },
    //切换展示框的展示
    handleChangeDisplay() {
      this.wrapperVisible = !this.wrapperVisible
    },

  }
}
</script>


<style scoped>

.s-scrollbar {
  overflow: hidden;
  position: relative;
}

/*求职状态标题*/
.job-status__title {
  float: left;
  margin-bottom: 29px;
  font-size: 24px;
  color: #333;
  letter-spacing: 1.21px;
}
/*求职状态标题*/

/*求职状态必填标识项*/
.job-status__title__must {
  background: #ef7c67;
  border-radius: 2px;
  display: inline-block;
  width: 34px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  vertical-align: 4px;
}
/*求职状态必填标识项*/

/*个人信息包裹容器*/
.profile-pre-wrapper {
  clear: both;
  position: relative;
  color: #333;
  padding-top: 20px;
}
/*个人信息包裹容器*/




</style>
